<style>

.form-section {
  margin-bottom: 20px;
  padding-right: 20px;
}

.form-section h3 {
  border-bottom: 2px solid #1890ff;
  padding-bottom: 5px;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  margin-bottom: 10px;
}

.form-group label {
  width: 100px;
  padding-right: 10px;
}

.form-group input,
.form-group select {
  flex: 1;
  padding: 5px;
}

.send-receive-section {
  display: flex;
  justify-content: space-between;
}

.form-section.send, .form-section.receive {
  width: 48%;
}

.form-section.send h3, .form-section.receive h3 {
  background-color: #ffecb3; /* 发货背景色 */
}

.form-section.receive h3 {
  background-color: #e7f7e8; /* 收货背景色 */
}

.submit-buttons {
  margin-top: 20px;
}

.sl {
  text-align: right;
}
</style>
<template>
  <div class="app">
    <div class="a"
         style="margin: auto; margin-top: 20px; border-radius:5px; padding: 20px; width: 80%;  background: #FFFFFF;">
      <div class="form-section">
        <h3>基础信息</h3>
        <el-form ref="form" :model="form" inline label-width="100px">
          <el-form-item class="input" label="订单编号" prop="OrderID">
            <el-input v-model="form.ddh" placeholder="D203001"/>
          </el-form-item>
          <el-form-item label="客户名称">
            <el-select v-model="form.kcname" clearable placeholder="请选择">
              <el-option label="广州物流有限公司" value="广州物流有限公司"></el-option>
              <el-option label="河南物流有限公司" value="河南物流有限公司"></el-option>
              <el-option label="河南物流有限公司" value="河南物流有限公司"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="input" label="客户编号" prop="CustomerID">
            <el-input v-model="form.ddh" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="始发地" prop="sfd">
            <el-select v-model="form.sfd" placeholder="请选择">
              <el-option label="河南" value="河南"></el-option>
              <el-option label="河北" value="河北"></el-option>
              <el-option label="石家庄" value="石家庄"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目的地" prop="mdd">
            <el-select v-model="form.mdd" placeholder="请选择">
              <el-option label="北京" value="北京"></el-option>
              <el-option label="上海" value="上海"></el-option>
              <el-option label="广州" value="广州"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="合同">
            <el-select v-model="form.hetong" clearable placeholder="请选择">
              <el-option label="合同一" value="合同一"></el-option>
              <el-option label="合同二" value="合同二"></el-option>
              <el-option label="合同三" value="合同三"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="运输类型">
            <el-select v-model="form.yslx" clearable placeholder="请选择">
              <el-option label="整车" value="整车"></el-option>
              <el-option label="零件" value="零件"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="货物类型">
            <el-select v-model="form.hwlx" clearable placeholder="请选择">
              <el-option label="日用品" value="日用品"></el-option>
              <el-option label="食品" value="食品"></el-option>
              <el-option label="文件" value="文件"></el-option>
              <el-option label="家具" value="家具"></el-option>
            </el-select>
          </el-form-item>
          <br>
          <el-form-item label="订单来源">
            <el-select v-model="form.laiyaun" clearable placeholder="请选择">
              <el-option label="手动添加" value="手动添加"></el-option>
              <el-option label="App用户下单" value="App用户下单"></el-option>
              <el-option label="系统导入" value="系统导入"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="下单时间">
            <el-date-picker
              v-model="form.OrderTime"
              placeholder="选择日期"
              type="date"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>


      <div class="b">
        <div class="send-receive-section">
          <div class="form-section send">
            <h3>发货信息</h3>
            <el-form ref="form" :model="form" inline label-width="100px">
              <el-form-item label="联系人">
                <el-input v-model="form.fname" placeholder="请输入内容"/>
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input v-model="form.fphone" placeholder="请输入内容"/>
              </el-form-item>
              <el-form-item label="详细地址">
                <el-input v-model="form.faddress" placeholder="请输入内容"/>
              </el-form-item>
              <el-form-item label="计划发货日期">
                <el-date-picker
                  v-model="form.ktime"
                  placeholder="选择日期"
                  type="date">
                </el-date-picker>
              </el-form-item>
            </el-form>
          </div>
          <div class="form-section receive">
            <h3>收货信息</h3>
            <el-form ref="form" :model="form" inline label-width="100px">
              <el-form-item label="联系人">
                <el-input v-model="form.sname" placeholder="请输入内容"/>
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input v-model="form.sphone" placeholder="请输入内容"/>
              </el-form-item>
              <el-form-item label="详细地址">
                <el-input v-model="form.saddress" placeholder="请输入内容"/>
              </el-form-item>
              <el-form-item label="计划收货时`间">
                <el-date-picker
                  v-model="form.stime"
                  placeholder="选择日期"
                  type="date">
                </el-date-picker>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>

    <div class="a"
         style="margin: auto; margin-top: 20px; border-radius:5px; padding: 20px; width: 80%;  background: #FFFFFF;">
      <h3>收货信息</h3>
      <el-button type="primary" @click="onSubmit()">添加</el-button>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="序号">
        </el-table-column>
        <el-table-column
          prop="name"
          label="货物名称">
        </el-table-column>
        <el-table-column
          label="数量">
          <el-input-number v-model="num" controls-position="right" size="small" @change="handleChange" :min="1"
                           :max="20"></el-input-number>
        </el-table-column>
        <el-table-column
          prop="danwei"
          label="单位">
        </el-table-column>
        <el-table-column
          prop="name"
          label="体积(m)">
          <el-input-number v-model="num" controls-position="right" size="small" @change="handleChange" :min="1"
                           :max="20"></el-input-number>
        </el-table-column>
        <el-table-column
          prop="name"
          label="重量(kg)">
          <el-input-number v-model="num" controls-position="right" size="small" @change="handleChange" :min="1"
                           :max="20"></el-input-number>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="danger" size="small" @click="handleDelete(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <span>合计：</span>
      <div class="sl"><span>总数量:0   总体积:0(m3)   总重量:0(kg)</span></div>
    </div>


    <div class="xuqiu"
         style="margin: auto; margin-top: 20px; border-radius:5px; padding: 20px; width: 80%;  background: #FFFFFF;">
      <h3>需求车辆</h3>
      <el-form ref="form" :model="form" inline label-width="100px">
        <el-form-item label="车辆类型">
          <el-select v-model="form.chetype" clearable placeholder="请选择">
            <el-option label="小轿车" value="小轿车"></el-option>
            <el-option label="面包车" value="面包车"></el-option>
            <el-option label="冷藏车" value="冷藏车"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车长">
          <el-select v-model="form.chechang" clearable placeholder="请选择">
            <el-option label="5米2" value="5米2"></el-option>
            <el-option label="6米2" value="6米2"></el-option>
            <el-option label="6米8" value="6米8"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用车数量">
          <el-input v-model="form.ycnum" placeholder="请输入内容"/>
        </el-form-item>
      </el-form>
    </div>

    <div class="feiyong"
         style="margin: auto; margin-top: 20px; border-radius:5px; padding: 20px; width: 80%;  background: #FFFFFF;">
      <h3>费用信息</h3>
      <el-form ref="form" :model="form" inline label-width="100px">
        <el-form-item label="计费方式">
          <el-select v-model="form.BillingMethod" clearable placeholder="请选择">
            <el-option label="按重量计算" value="按重量计算"></el-option>
            <el-option label="按体积计算" value="按体积计算"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运输费">
          <el-input v-model="form.TransportFee" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="保险费">
          <el-input v-model="form.InsuranceFee" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="包装费">
          <el-input v-model="form.PackagingFee" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="装卸费">
          <el-input v-model="form.LoadingUnloadingFee" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="中转费">
          <el-input v-model="form.TransferFee" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="燃油费">
          <el-input v-model="form.FuelFee" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="服务费">
          <el-input v-model="form.ServiceFee" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="其他费用">
          <el-input v-model="form.OtherFees" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="费用合计">
          <el-input v-model="form.TotalFees" placeholder="请输入内容"/>
        </el-form-item>
      </el-form>
    </div>

    <div class="fukuan"
         style="margin: auto; margin-top: 20px; border-radius:5px; padding: 20px; width: 80%;  background: #FFFFFF;">
      <h3>付款方式</h3>
      <el-form ref="form" :model="form" inline label-width="100px">
        <el-form-item label="现付">
          <el-input v-model="xf" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="预付">
          <el-input v-model="yf" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="到付">
          <el-input v-model="df" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="周期付">
          <el-input v-model="zqf" placeholder="请输入内容"/>
        </el-form-item>
        <br>
        <el-form-item label="付费合计">
          <el-input v-model="form.TotalPayment" placeholder="请输入内容"/>
        </el-form-item>
      </el-form>
    </div>

    <div class="dingdan"
         style="margin: auto; margin-top: 20px; border-radius:5px; padding: 20px; width: 80%;  background: #FFFFFF;">
      <h3>订单备注</h3>
      <el-form ref="form" :model="form" inline label-width="100px">
        <el-form-item label="">
          <el-input v-model="form.Remarks" type="textarea"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit()">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>
<script>
import {addGoods, getGoods, listGoods} from "@/api/goods/goods";

export default {
  data() {
    return {
      form: {},
      tableData: [{
        id: '1',
        danwei: '箱',
      }],
      num: '',
    }
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    findGoods() {
      var id = this.$route.query.id;
      getGoods(id).then(response => {
        console.log(response);
        this.form = response.data;
      });
    },
    onSubmit() {
      addGoods(this.form).then(response => {
        this.$modal.msgSuccess("新增成功");
      });
    },
  },
  created() {
    // this.findGoods();
    console.log( this.$route.query.customerID+"....."+(this.$route.query.customerID!==undefined))
    if(this.$route.query.customerID!==undefined){
      this.findGoods();
    }
  },

}


</script>















